<template>
  <Form v-if="''" ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
    <Row :gutter="24" type="flex" justify="start" style="padding:2px 5px;">
      <Col v-for="(item,index) in columns.filter(c=>c.line!=true)" :key="index" :span="24 / (G_IsMobile ? 1 : cols)">
        <FormItem :label="item.title" :prop="item.key" >
          <field-cell v-if="!onlyRead" :config="item.config" v-model="data[item.key]" @change="$emit('change',item.key,data[item.key])"></field-cell>
          <span class="ivu-input" v-else>{{data[item.key]}}</span>
        </FormItem>
      </Col>
      <Col v-for="(item,index) in columns.filter(c=>c.line==true)" :key="'line'+index" :span="24">
        <FormItem :label="item.title" :prop="item.key" >
          <field-cell v-if="!onlyRead" :config="item.config" v-model="data[item.key]" @change="$emit('change',item.key,data[item.key])"></field-cell>
          <span class="ivu-input" v-else>{{data[item.key]}}</span>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>

<script>
import fieldCell from '../basic/fieldCell'
export default {
  name: "cfg-form",
  components:{fieldCell},
  data(){
    return {
    }
  },
  props: {
    labelWidth: {
      default: () => {
        return 100;
      }
    },
    labelPosition: {
      default: () => {
        return 'right';
      }
    },
    cols: {
      default: () => {
        return 3;
      }
    },
    columns: {
      default: () => {
        return [];
      }
    },
    data:{
      default:()=>{
        return {};
      }
    },
    rules:{
      default:()=>{
        return {};
      }
    },
    onlyRead: {
      default: () => {
        return false
      }
    },
  }
}
</script>

<style lang="scss" scoped>

</style>